<template>
  <div class="container">
    <el-col :span="24">
      <el-card class="box-card" style="text-align: left;margin-top: 10px">
        <span style="font-size: 24px">欢迎使用宠物健康服务平台！v1.0</span>
      </el-card>
    </el-col>
  </div>
</template>

<script>
  var echarts = require('echarts')
  import chinaMap from "./china.json";
  import 'echarts/lib/component/visualMap'

  export default {
    name: 'index',
    data() {
      return {
        data: {
          informationSubmission: '',
          residentHealth: '',
          turnoverLineName: [],
          turnoverLineValue: [],
          vaccination: '',
          vaccinationPieValue: [],
          visitor: '',
          visitorLineName: [],
          visitorLineValue: [],
        },
        requestData: {
          current: 1,
          pageSize: 10,
          requestData: {
          }
        },
      }
    },
    created() {

    },
    mounted() {
      echarts.registerMap("china", {geoJSON: chinaMap});
      this.initEachers()
      this.initMap();
    },
    methods: {
      initEachers() {
        this.service.post('/home/getHomeData'
          , {data: this.addParam})
          .then(result => {
            let data = result.data.data;
            this.data = data;
            for (let i = 0; i < data.vaccinationPie.length; i++) {
              if (data.vaccinationPie[i].number == 1) {
                data.vaccinationPie[i].name = '一针'
                data.vaccinationPie[i].value = parseInt(data.vaccinationPie[i].card_number)
              } else if (data.vaccinationPie[i].number == 2) {
                data.vaccinationPie[i].name = '二针'
                data.vaccinationPie[i].value = parseInt(data.vaccinationPie[i].card_number)
              } else if (data.vaccinationPie[i].number == 3) {
                data.vaccinationPie[i].name = '三针'
                data.vaccinationPie[i].value = parseInt(data.vaccinationPie[i].card_number)
              }
            }
            var myChart1 = echarts.init(document.getElementById('main1'))
            var option = {
              title: {
                text: '小区疫苗接种针次分布',
                subtext: '（人）',
                x: 'center'
              },
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
              },
              itemStyle: {

                normal: {

                  // 好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，

                  color: function (params) {
                    // build a color map as your need.

                    var colorList = [

                      '#27C24C', '#F05050', '#23b7e5', '#7266ba', '#18bc9c',

                      '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',

                      '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'

                    ]

                    return colorList[params.dataIndex]
                  },
                  label: {

                    show: true,

                    position: 'top',
                    formatter: '{b}\n{c}'

                  }

                }

              },
              legend: {
                orient: 'vertical',
                left: 'left',
                data: ['一针', '两针', '三针']
              },
              series: [{
                name: '疫苗接种',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: this.data.vaccinationPie,
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart1.setOption(option)
            window.addEventListener('resize', function () {
              myChart1.resize()
            })
            this.initTwo()
            this.initThree()
          })
      },
      initTwo() {
        let data = this.data.visitorLine;
        let visitorLineName = [];
        let visitorLineValue = [];
        for (let i = 0; i < data.length; i++) {
          visitorLineName.push(data[i].create_date.substring(0, 11))
          visitorLineValue.push({value: data[i].temperature})
        }
        var myChart = echarts.init(document.getElementById('main'))
        // 指定图表的配置项和数据
        let date = '2020-03-25'
        let option = {
          tooltip: {
            trigger: 'axis',

          },
          legend: {
            color: ['#13C7F2'],
            data: ['访客（次）'],
            icon: 'rect',
            itemWidth: 18,
            itemHeight: 2,
            itemGap: 13,
            right: '4%',
            textStyle: {
              fontSize: 12,
              color: '#23b7e5'
            }
          },
          grid: {
            top: 'middle',
            left: '3%',
            right: '4%',
            bottom: '3%',
            height: '80%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: visitorLineName,
            axisLine: {
              lineStyle: {
                color: '#23b7e5'
              }
            },
            axisLabel: {
              color: '#23b7e5',
              fontWeight: 'bold'
            },
            axisTick: {
              show: false
            },
            axisPointer: {
              lineStyle: {
                color: '#D11F1F'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#23b7e5'
              }
            },
            axisLabel: {
              formatter: '{value}',
              fontWeight: 'bold'
            },
            splitArea: {
              show: false
            }
          },
          series: [{
            name: '访客（次）',
            type: 'line',
            symbolSize: 15,
            data: visitorLineValue,
            color: '#13C7F2',
            lineStyle: {
              normal: {
                width: 2.5,
                color: '#13C7F2'
              }
            },
            hoverAnimation: false,
            smooth: true
          },
          ]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
        window.addEventListener('resize', function () {
          myChart.resize()
        })
      },
      initThree() {
        let data = this.data.turnoverLine;
        let turnoverLineName = []
        let turnoverLineValue = []
        for (let i = 0; i < data.length; i++) {
          turnoverLineName.push(data[i].create_date.substring(0, 11))
          turnoverLineValue.push({value: data[i].card_number})
        }
        var myChart2 = echarts.init(document.getElementById('years'))
        let date = '2020-03-25'
        let option = {
          tooltip: {
            trigger: 'axis',

          },
          legend: {
            color: ['#13C7F2'],
            data: ['居民出入（次）'],
            icon: 'rect',
            itemWidth: 18,
            itemHeight: 2,
            itemGap: 13,
            right: '4%',
            textStyle: {
              fontSize: 12,
              color: '#23b7e5'
            }
          },
          grid: {
            top: 'middle',
            left: '3%',
            right: '4%',
            bottom: '3%',
            height: '80%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: turnoverLineName,
            axisLine: {
              lineStyle: {
                color: '#23b7e5'
              }
            },
            axisLabel: {
              color: '#23b7e5',
              fontWeight: 'bold'
            },
            axisTick: {
              show: false
            },
            axisPointer: {
              lineStyle: {
                color: '#D11F1F'
              }
            }
          },
          yAxis: {
            type: 'value',

            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#23b7e5'
              }
            },
            axisLabel: {
              formatter: '{value}',
              fontWeight: 'bold'
            },
            splitArea: {
              show: false
            }
          },
          series: [{
            name: '居民出入（次）',
            type: 'line',
            symbolSize: 15,
            data: turnoverLineValue,
            color: '#13C7F2',
            lineStyle: {
              normal: {
                width: 2.5,
                color: '#13C7F2'
              }
            },
            hoverAnimation: false,
            smooth: true
          },
          ]
        }
        myChart2.setOption(option)
        myChart2.currentIndex = -1
        setInterval(function () {
          var dataLen = option.series[0].data.length
          // 取消之前高亮的图形
          myChart2.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: myChart2.currentIndex
          })
          myChart2.currentIndex = (myChart2.currentIndex + 1) % dataLen
          // 高亮当前图形
          myChart2.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: myChart2.currentIndex
          })
        }, 1000)

        // 使用刚指定的配置项和数据显示图表。
        /* myChart.setOption(option); */
        window.addEventListener('resize', function () {
          myChart2.resize()
        })
      },
      initMap() {
        this.service.post('/tbepidemic/list'
          , this.requestData)
          .then(result => {
            let data = result.data.data.data
            data.map(item => {
              item.name = item.province;
              item.value = item.quantity;
            })

            var myChart3 = echarts.init(document.getElementById('epidemicDistribution'))
            let option = {
              backgroundColor: '#ccc',
              tooltip: {
                triggerOn: "click",
                formatter: function (e, t, n) {
                  console.log(e)
                  return .5 == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value
                }
              },
              visualMap: {
                min: 0,
                max: 1000,
                left: 26,
                bottom: 40,
                showLabel: !0,
                text: ["高", "低"],
                pieces: [{
                  gt: 100,
                  label: "> 100 人",
                  color: "#7f1100"
                }, {
                  gte: 10,
                  lte: 100,
                  label: "10 - 100 人",
                  color: "#ff5428"
                }, {
                  gte: 1,
                  lt: 10,
                  label: "1 - 9 人",
                  color: "#ff8c71"
                }, {
                  gt: 0,
                  lt: 1,
                  label: "疑似",
                  color: "#ffd768"
                }, {
                  value: 0,
                  color: "#ffffff"
                }],
                show: !0
              },
              geo: {
                map: "china",
                roam: !1,
                zoom: 1.53,
                top: 150,
                label: {
                  normal: {
                    show: !0,
                    fontSize: "15",
                    color: "rgba(0,0,0,0.7)"
                  }
                },
                itemStyle: {
                  normal: {
                    //shadowBlur: 50,
                    //shadowColor: 'rgba(0, 0, 0, 0.2)',
                    borderColor: "rgba(0, 0, 0, 0.2)"
                  },
                  emphasis: {
                    areaColor: "#f2d5ad",
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    borderWidth: 0
                  }
                }
              },
              series: [{
                name: "确诊病例",
                type: "map",
                geoIndex: 0,
                data: data
              }]
            };
            myChart3.setOption(option)
            window.addEventListener('resize', function () {
              myChart3.resize()
            })
          })
      }
    }
  }
</script>

<style scoped>

</style>
